<template>
  <el-container style="height: 650px; border: 1px solid #eee">
    <!-- 修改Aside标签:绑定aside_width变量和isCollapse变量 -->
    <el-aside :width="aside_width"  style="background-color: rgb(238, 241, 246);margin-left: -1px">
      <Aside :isCollapse="isCollapse" />
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px;border-bottom: 1px solid #d3d0d0">
        <!-- 修改Head标签  -->
        <Head @doCollapse="doCollapse" :icon="icon" />
      </el-header>

      <el-main>
        <Main />
      </el-main>

    </el-container>
  </el-container>
</template>

<style scoped>
.el-header {
  color: #333;
  line-height: 60px;
}
.el-main{
  padding: 5px;
}
.el-aside {
  color: #333;
}
</style>

<script>
import Aside from "@/components/Aside.vue";
import Head from "@/components/Head.vue";
import Main from "@/components/Main.vue";

export default {
  components: {Main, Head, Aside},
  data() {
    return {
      isCollapse: false,
      aside_width: '200px',
      icon: 'el-icon-s-fold'
    }
  },
  methods: {
    doCollapse() {
      this.isCollapse = !this.isCollapse;
      if (!this.isCollapse){//false是收起状态,true是展开状态
        //展开状态
        this.aside_width = '200px';
        this.icon = 'el-icon-s-fold';
      }else {//关闭状态
        this.aside_width = '60px';
        this.icon = 'el-icon-s-unfold';
      }
    },

  },

};
</script>
